<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->

<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no,viewport-fit=cover">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta charset="utf-8">
    <title>原生JS签名，画图板</title>
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-4.2.1.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            text-align: center;
        }

        canvas {
            max-width: 100%;
            border: 2px dotted #ccc;
        }
    </style>
</head>

<body>
<div class="buttons">
    <canvas id="base64Canvas" style="display: none"></canvas>
    <button type="button" class="btn btn-primary ouput">生成图片</button>
    <button type="button" class="btn btn-light undo">撤销</button>
    <button type="button" class="btn btn-light clear">清除画布</button>
</div>
<script src="./index.js"></script>
<script>
    //初始化
    var sign = new Draw({
        // canvas:document.getElementById('canvas'),
        lineWidth: 3, // 线条宽度
        width: 400, // canvas 宽
        height: 200, //canvas 高
        strokeStyle: '#333333' // 线条颜色
    });

    window.onload = function () {
        // 点击输出图片
        document.querySelector('.ouput').onclick = function () {
            var img = new Image();
            img.style.width = '200px';
            img.src = sign.ouput();
            img.onload = function () {
                //  document.body.appendChild(img);
                var canvas = document.getElementById('base64Canvas');
                canvas.width = img.width;
                canvas.height = img.height;

                var context = canvas.getContext('2d');
                context.drawImage(img, 0, 0);

                var base64String = canvas.toDataURL(); // 生成base64编码

                console.log(base64String); // 显示在控制台
            }
            // document.querySelector('img') && document.querySelector('img').remove();
        }
        // 点击清除
        document.querySelector('.clear').onclick = function () {
            sign.clear();
        }
        // 点击撤销
        document.querySelector('.undo').onclick = function () {
            if (sign.state.undopath.length > 0) {
                sign.undo();
            } else {
                console.log('还没有签名');
            }
        }
    }
</script>
</body>

</html>